<template>
    <div id="login_back" :style="{ backgroundImage: 'url(' + background_image + ')' }">
        <div :id="pc ? 'from_back_pc' : 'from_back_mobile'">
            <div id="from">
                <div align="center">
                    <p style="font-size: 30px; padding: 10px; color: #e6a23c">
                        {{ adress_data.title }}
                    </p>
                    <p style="font-size: 15px; padding: 5px; color: #c0c4cc">
                        {{ adress_data.adress }}
                    </p>
                </div>
                <el-form ref="form" :model="form" label-width="70px" size="small" label-position="left" style="padding: 10px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.user_name" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form.user_password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input v-model="form.again_password" placeholder="确认密码" show-password></el-input>
                    </el-form-item>
                    <el-button type="warning" @click="onSubmit" style="width: 100%">注册</el-button>
                </el-form>
                <div align="right" style="padding: 10px">
                    <el-button type="text" @click="$router.push('/')">登录</el-button>
                    <el-button type="text" @click="$router.push('/forget')">找回密码</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["pc"],
    data() {
        return {
            background_image: 'https://images.unsplash.com/photo-1630291797063-9d564d60c499?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1275&q=80',
            adress_data: {
                title: "注册",
                adress: "欢迎注册",
            },
            form: {
                user_name: "",
                user_password: "",
                again_password:"",
                login_status: false,
            },
        };
    },
    methods: {
        onSubmit() {
            this.$message.success("登录成功，即将为您跳转");
            if (sessionStorage.getItem("aside_menu") == null) {
                var menu = [];
                sessionStorage.setItem("aside_menu", JSON.stringify(menu));
            }
            setTimeout(() => {
                this.$router.push("/home");
            }, 1500);
        },
    },
};
</script>

<style scoped>
#login_back {
    width: 100%;
    height: 100vh;
    background-size: cover;
    position: relative;
}

#from_back_pc {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 450px;
    height: 350px;
    background: rgba(255, 255, 255, 0);
}

#from_back_mobile {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 90%;
    height: 350px;
    background: rgba(255, 255, 255, 0);
}

#from {
    width: 100%;
    height: 100%;
    margin-left: 0px;
    background-color: #ffffffe1;
    padding: 0px;
    border-radius: 5px;
}

#from p+p{
    color: #1de2d1;
    margin-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #1de2d1;
    animation: typing 5s steps(25) infinite;
}

@keyframes typing {
    0%{
        width: 0ch;
    }
    75%{
        width: 12ch;
    }
    100%{
        width: 0ch;
    }
}
</style>